<template>
	<view class="container" :style="[{paddingBottom:shopInfo.bundleGood?'230rpx':'100rpx'}]">
		<view class="detail-swiper">
			<trans-custom bgColor="243,73,48" :isBack="true" :opacity="opacity" :iconOpcity="iconOpcity">
				<block slot="content" class=" text-cut">{{navTitle}}</block>
			</trans-custom>
			<view class="swiper-content">
				<swiper autoplay="true" interval="4000" duration="500" indicator-dot='true' @change="swiperChange" circular="true"
				 v-if="shopInfo.gallery_list && shopInfo.gallery_list.length>0">
					<block v-for="(item,index) in shopInfo.gallery_list" :key="index">
						<swiper-item>
							<image :src="item" mode='' class="slide-image" />
						</swiper-item>
					</block>
				</swiper>
				<view class="poress">
					<text>{{swiperIndex}}</text><text>/ {{shopInfo.gallery_list.length}}</text>
				</view>
			</view>
		</view>
		<!-- 商户信息 -->
		<view class="shops-info">
			<view class="name">
				<view class="">{{shopInfo.goodsName}}</view>
				<view class=""></view>
				<view class="">
					<!-- #ifdef MP-WEIXIN -->
					<button class="" open-type='share'>
						<tui-icon :name="'share'" :size="'25'" :color="'#f8990b'" @click="showShare"></tui-icon>
					</button>
					<!-- #endif -->
				</view>
			</view>
			<view class="price">
				<view class="">
					<text v-if="shopInfo.shopPrice!=''" class="text-price text-colorP">{{shopInfo.shopPrice}}</text>
					<text v-if="shopInfo.shopPrice!='' && shopInfo.integral!=''" class="text-colorP">+</text>
					<text v-if="shopInfo.integral!=''" class="text-colorP">{{shopInfo.integral}}</text>
					<text v-if="shopInfo.integral!=''" class="text-colorP  j_f">积分</text>
					<text class="text-price">{{shopInfo.marketPrice}}</text>
				</view>
				<view class="" v-if="shopInfo.saleNum>0">
					已换购{{shopInfo.saleNum}}件
				</view>
			</view>
		</view>
		<!-- 配送信息 -->
		<view class="activity-info">
			<view class="activity-item" v-if="shopInfo.goodsTips">
				<view class="left">
					活动
				</view>
				<view class="right">
					<view class="right-item">
						<!-- <view class="tui-tag-small tui-tag-outline tui-warning-outline">积分专享</view> -->
						<view class="act-text text-cut ">
							{{shopInfo.goodsTips}}
						</view>
					</view>
				</view>
			</view>
			<view class="activity-item">
				<view class="left">
					保障
				</view>
				<view class="right rixh-text">
					<view class="" v-for="(item,i) in shopInfo.accreds_data" :key="i">
						<text>{{item.name}}</text>
						<text v-if="i!=shopInfo.accreds_data.length-1"> · </text>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="evaluate">
			<view class="title">
				<text>商品评价</text>
				<text @click="goList"  v-if="evaluteList.length > 0">查看全部</text>
			</view>
			<view class="evaluate-item" v-for="(item,index) in evaluteList" :key="index">
				<image :src="item.headimg" mode="aspectFill"></image>
				<view class="evaluate-cont">
					<view class="text-cut">{{item.user_name}}</view>
					<view>{{item.content}}</view>
				</view>
			</view>
			<view class="no-evalute" v-if="evaluteList.length == 0">
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/comment-is-empty.png" mode=""></image>
				<text>暂时没有其他评价，去其他地方看看吧</text>
			</view>
		</view>
		<!-- 商家 -->
		<view class="shops-desc">
			<view class="s_info">
				<image :src="shopInfo.shopImg" mode=""></image>
				<view class="shops-name">
					<view class="">
						{{shopInfo.shopName}}
					</view>
					<view class="star">
						<tui-rate :current="shopInfo.score" normal="#ccc" :disabled="true"></tui-rate>
						<text>{{shopInfo.score}}分</text>
					</view>
				</view>
			</view>
			<view class="dvider"></view>
			<view class="goods-list" v-if="showRecommend.length>0">
				<view class="tit">
					<text>店铺好物</text>
					<text @click="changeGoods" v-if="recommendList.length>6">换一批</text>
				</view>
				<view class="g-list">
					<view class="g-item" v-for="(item,index) in showRecommend" :key="index" @click="nav" :data-url="'/pages/cloudMall/productDetail?id='+item.id">
						<image :src="item.goodsImg" mode=""></image>
						<text>{{item.goodsName}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods-parse">
			<view class="tit">
				<text>商品详情</text>
			</view>
			<view class="shop-info-desc">
				<rich-text :nodes="shopInfo.htmlNodes"></rich-text>
			</view>
		</view>
		<!-- 操作栏 -->
		<view class="tui-operation tui-top40 use-all">
			<view class="tui-operation-left tui-col-5">
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="makePhone">
					<tui-icon name="kefu" size="22" color='#333'></tui-icon>
					<view class="tui-operation-text tui-scale-small">客服</view>
				</view>
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="changeCollet">
					<tui-icon :name="'star'" :size="'22'" :color="'#999999'" v-if="!shopInfo.is_collect"></tui-icon>
					<tui-icon :name="'star-fill'" :size="'22'" :color="'#f8990b'" v-if="shopInfo.is_collect"></tui-icon>
					<view class="tui-operation-text tui-scale-small">收藏</view>
				</view>
				<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="goCar">
					<tui-icon name="cart" size="22" color='#333'></tui-icon>
					<view class="tui-operation-text tui-scale-small">购物车</view>
					<tui-badge type="danger" size="small" v-if="shopInfo.cart_num>0">{{shopInfo.cart_num}}</tui-badge>
				</view>
			</view>
			<view class="tui-operation-right tui-col-7 tui-btnbox-2">
				<tui-button type="danger" shape="rightAngle" @click="addCar">加入购物车</tui-button>
				<tui-button type="warning" shape="rightAngle" @click="goConfirm">立即购买</tui-button>
			</view>
		</view>
		<!-- 捆绑商品 -->
		<view class="bundle-good" v-if="shopInfo.bundleGood">
			<view class="bundle-item">
				<image :src="shopInfo.bundleGood.good_img" class="shop-img" mode=""></image>
				<view class="bundle-info">
					<view>{{shopInfo.bundleGood.name}}+{{shopInfo.name}}</view>
					<view>
						<text class="text-colorP">特惠价：</text>
						<text class="text-price text-colorP" v-if="shopInfo.bundleGood.status=='price' || shopInfo.bundleGood.status=='all'">600</text>
						<text class="text-colorP" v-if="shopInfo.bundleGood.status=='all'">+</text>
						<text class="text-colorP" v-if="shopInfo.bundleGood.status=='scard' || shopInfo.bundleGood.status=='all'">69</text>
						<text class="text" v-if="shopInfo.bundleGood.status=='scard' || shopInfo.bundleGood.status=='all'">积分</text>
					</view>
				</view>
			</view>
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/jump.png" class="go-goods" mode=""></image>
		</view>
	</view>
</template>

<script>
	import uniTag from "../component/uni-tag.vue";
	import tuiIcon from "@/components/thorUI/icon"
	import tuiRate from "@/components/thorUI/rate"
	import tuiButton from "@/components/thorUI/button"
	import tuiBadge from "@/components/thorUI/badge"
	// import {
	// 	returnTest
	// } from "@/utils/wxParse.js"
	import htmlParser from '@/utils/html-parser'
	export default {
		components: {
			uniTag,
			tuiIcon,
			tuiRate,
			tuiButton,
			tuiBadge
		},
		data() {
			return {
				navTitle: '商铺详情',
				opacity: 0,
				iconOpcity: 0.5,
				scrollH: 0,
				shopInfo: {
					photos: ['https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190909163718.jpg',
						'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190909163718.jpg'
					],
					name: '猫床猫窝四季通用冬季保暖小猫猫床猫窝四季通用冬季保暖小猫猫床猫窝四季通用冬季保暖小猫猫床猫窝四季通用冬季保暖小猫',
					good_img: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/u%3D380598404.png',
					// status    是否为纯积分  scord 纯积分  all  积分+钱  price  纯钱
					status: 'all',
					// 是否收藏此商品
					isCollect: true,
					// 商户评分
					starNum: 4.5,
					// 商户简介  富文本
					desc: '',
					phone: '15891739110',
					// 活动
					activety: [],
					// 保障
					safeguard: [],
					// 是否存在捆绑商品
					bundleGood: {
						name: '猫床猫窝四季通用冬季保暖小猫猫床猫窝四季通用冬季保暖小猫猫床猫窝四季通用冬季保暖小猫猫床猫窝四季通用冬季保暖小猫',
						good_img: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/u%3D380598404.png',
						status: 'all',
						id: 11
					}
				},
				swiperIndex: 1,
				recommendList: [],
				showRecommend: [],
				nowHotIndex: 0,
				evaluteList: [],

				htmlNodes: ''
			}
		},
		onShow() {
			if (uni.getStorageSync('needData')) {
				uni.removeStorageSync('needData')
			}
		},
		methods: {
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			},
			// 直接购买
			goConfirm() {
				var needData = {}
				needData['shopInfo'] = {
					shopName: this.shopInfo.shopName,
					shopId: this.shopInfo.shopId,
					shopImg: this.shopInfo.shopImg
				}
				needData['productList'] = []
				// 存储一组数据进去
				var item = {
					goodsName: this.shopInfo.goodsName,
					goodsImg: this.shopInfo.goodsImg,
					id: this.shopInfo.id,
					integral: this.shopInfo.integral,
					prerogative: this.shopInfo.prerogative,
					shopPrice: this.shopInfo.shopPrice,
					saleNums: 1
				}
				needData['productList'].push(item)
				uni.setStorageSync('needData', needData)
				uni.navigateTo({
					url: '/pages/confirmOrder',
				})
			},
			// 添加商品到购物车
			addCar() {
				var that = this;
				if (!this.checkUser()) {
					let curUrl = `/${this.curUrlWithArgs()}`
					curUrl = encodeURIComponent(curUrl)
					uni.navigateTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				this.$request({
					url: '/ShopCarts/add_carts',
					data: {
						goodsId: that.productId,
						cartNum: 1,
						shopId: that.shopInfo.shopId
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							uni.showModal({
								content: '宝贝已经进入购物车了~',
								confirmText: '去购物车',
								cancelText: '再转转',
								success(res) {
									if (res.confirm) {
										that.goCar()
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 检测是否登陆   公众号不需要手机号也可以获取成功   app和小程序则需要所有都获取
			checkUser() {
				// #ifdef H5 || APP-PLUS
				if (uni.getStorageSync('auth_token')) {
					return true
				} else {
					return false
				}
				// #endif

				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('auth_token') && uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').phone) {
					return true
				} else {
					return false
				}
				// #endif
			},
			// 获取页面栈的路径
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			// 去购物车
			goCar() {
				if (!this.checkUser()) {
					let curUrl = `/${this.curUrlWithArgs()}`
					curUrl = encodeURIComponent(curUrl)
					uni.navigateTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				uni.navigateTo({
					url: '/pages/cloudMall/shoppingCart',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 换一批
			changeGoods() {
				var that = this;
				var nowHotIndex = that.nowHotIndex;
				var recommendList = that.recommendList;
				var index = parseInt(Math.random() * (recommendList.length - 1 + 1), 10)
				if (index != nowHotIndex) {
					that.showRecommend = recommendList[index]
					that.nowHotIndex = index
				} else {
					this.changeGoods()
				}
			},
			// 推荐商品
			getRecommend(shopId) {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_shop_goods',
					data: {
						shopId: shopId,
						page: 1,
						isRecom: 1
					},
					success: res => {
						if (res.data.status == 1) {
							that.recommendList = that.SplitArray(6, res.data.data.data)
							that.showRecommend = that.recommendList[0]
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 商品评价
			getEvalute() {
				var that = this;
				this.$request({
					url: '/GoodsAppraises/get_list',
					data: {
						goodsId: that.productId,
						page: 1
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.data.length > 3) {
								res.data.data.data.length = 3
							}
							that.evaluteList = res.data.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			SplitArray(N, Q) {
				var R = [],
					F;
				for (F = 0; F < Q.length;) R.push(Q.slice(F, F += N))
				return R
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current + 1
			},
			// 取消/收藏 商品
			changeCollet() {
				var that = this
				if (!this.checkUser()) {
					let curUrl = `/${this.curUrlWithArgs()}`
					curUrl = encodeURIComponent(curUrl)
					uni.navigateTo({
						url: `/pages/login?next=${curUrl}`,
					})
					return
				}
				var shopInfo = this.shopInfo
				if (!shopInfo.is_collect) {
					this.$request({
						url: '/ShopCollect/adds',
						data: {
							goods_id: that.productId
						},
						success: res => {
							if (res.data.status == 1) {
								uni.hideLoading()
								uni.showToast({
									title: '已收藏商品~'
								})
								shopInfo.is_collect = !shopInfo.is_collect
								that.$forceUpdate()
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.$request({
						url: '/ShopCollect/del',
						data: {
							goods_id: that.productId
						},
						success: res => {
							if (res.data.status == 1) {
								uni.hideLoading()
								uni.showToast({
									title: '已取消收藏~'
								})
								shopInfo.is_collect = !shopInfo.is_collect
								that.$forceUpdate()
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
				this.shopInfo = shopInfo
			},
			// 联系客服
			makePhone() {
				var shopInfo = this.shopInfo
				if (shopInfo.phone) {
					uni.makePhoneCall({
						phoneNumber: shopInfo.shopTel
					})
				}
			},
			// 商品详情
			getDetail() {
				var that = this;
				this.$request({
					url: '/ShopGoods/get_detail',
					data: {
						goods_id: this.productId
					},
					success: res => {
						if (res.data.status == 1) {
							if (!res.data.data.gallery_list) {
								res.data.data.gallery_list = []
								res.data.data.gallery_list.push(res.data.data.goodsImg)
							}
							that.shopInfo = res.data.data
							that.navTitle = res.data.data.goodsName
							// 获取推荐好物
							that.getRecommend(res.data.data.shopId)
							// 修复富文本数据
							var jsonText = res.data.data.goodsDesc
							var htmlString = jsonText.replace(/\\/g, "").replace(/<img/g,
								"<img style=\"margin: 0 auto;display: block;width:100%;height:auto;\"");
							that.shopInfo.htmlNodes = htmlParser(htmlString);
							uni.hideLoading()
							// 在已经登录的时候检测是否授权
							if(uni.getStorageSync('auth_token')){
								this.checkIsCollect()
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			checkIsCollect(){
				var that = this;
				this.$request({
					url: '/ShopCollect/check_is_collect',
					data: {
						goods_id: this.productId
					},
					success: res => {
						if (res.data.status == 1) {
							var shopInfo = that.shopInfo
							shopInfo['is_collect'] = res.data.data.is_collect
							that.shopInfo = shopInfo
							that.$forceUpdate()
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goList() {
				uni.navigateTo({
					url: '/pages/cloudMall/evaluteList?id=' + this.productId
				});
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / (this.scrollH / 4);
			if (this.opacity >= 1 && opcity >= 1) {
				return;
			}
			this.opacity = Number(opcity).toFixed(2);
			var thisOpcity = this.opacity < 0 ? 0 : 1
			this.iconOpcity = 0.5 * (thisOpcity - this.opacity)
		},
		onLoad(options) {
			this.productId = options.id
			this.getDetail()
			this.getEvalute()
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			})
		},
	}
</script>

<style scoped>
	.container {
		padding-bottom: 100rpx;
	}

	.detail-swiper {
		width: 100%;
	}

	.swiper-content {
		width: 100%;
		height: 640rpx;
		position: relative;
	}

	.poress {
		position: absolute;
		right: 24rpx;
		bottom: 57rpx;
		padding: 0 20rpx;
		height: 42rpx;
		display: flex;
		align-items: center;
		color: #cdcdcd;
		background: rgba(0, 0, 0, .5);
		border-radius: 40rpx;
	}

	.poress>text {
		color: #cdcdcd;
		font-size: 22rpx;
	}

	.poress>text:nth-child(1) {
		font-size: 24rpx;
		font-weight: bold;
		padding-right: 10rpx;
	}

	.swiper-content .share-right {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}

	.swiper-content .share-right text {
		color: #f8990b;
		font-size: 48rpx;
	}

	.slide-image,
	swiper {
		width: 100%;
		height: 100%;
	}

	.shops-info {
		width: 100%;
		height: 203rpx;
		background-color: #ffffff;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shops-info .name {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.shops-info .name view:nth-child(1) {
		width: 620rpx;
		font-size: 32rpx;
		color: #333333;
		letter-spacing: 1rpx;
		font-weight: bold;
		padding-right: 30rpx;
		box-sizing: border-box;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.shops-info .name view:nth-child(2) {
		width: 4rpx;
		height: 48rpx;
		background-color: #efefef;
		border-radius: 1rpx;
	}

	.shops-info .name view:nth-child(3) {
		padding-left: 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shops-info .price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shops-info .price>view .j_f {
		font-weight: normal !important;
		font-size: 28rpx !important;
	}

	.shops-info .price>view:nth-child(1)>text {
		font-size: 38rpx;
		letter-spacing: 1rpx;
		font-weight: bold;
	}

	.shops-info .price>view:nth-child(1)>text:last-child {
		margin-left: 15rpx;
		font-size: 28rpx;
		text-decoration: line-through;
		color: #999999;
	}

	.shops-info .price>view:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.activity-info {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
		padding: 24rpx;
	}

	.activity-info .activity-item:last-child {
		margin-bottom: 0 !important
	}

	.activity-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.activity-item .rixh-text {
		flex: 1;

		display: flex;
		align-items: center;
		flex-direction: row !important;
	}

	.activity-item .rixh-text>view>text {
		font-size: 28rpx;
		line-height: 40rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.activity-item .left {
		letter-spacing: 1rpx;
		color: #666666;
		font-size: 30rpx;
		margin-right: 30rpx;
	}

	.activity-item .right {
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.activity-item .right .right-item:last-child {
		margin-bottom: 0 !important;
	}

	.activity-item .right .right-item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.activity-item .right .right-item .act-text {
		color: #333333;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.evaluate {
		width: 100%;
		margin-top: 20rpx;
		background: #fff;
		padding: 0 24rpx 20rpx;
	}

	.evaluate .title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		line-height: 80rpx;
		align-items: center;
		font-weight: bold;
	}

	.evaluate .title>text:nth-child(1) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}

	.evaluate .title>text:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #f34930;
	}

	.evaluate .evaluate-item {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
	}

	.evaluate .evaluate-item image {
		width: 56rpx;
		height: 56rpx;
		margin-right: 30rpx;
		border-radius: 100%;
	}

	.evaluate .evaluate-item .evaluate-cont {
		flex: 1;
	}

	.evaluate .evaluate-item .evaluate-cont>view:nth-child(1) {
		line-height: 52rpx;
		font-size: 28rpx;
		color: #666666;
		max-width: 200rpx;
	}

	.evaluate .evaluate-item .evaluate-cont>view:nth-child(2) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.shops-desc {
		width: 100%;
		background: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.shops-desc .s_info {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
	}

	.shops-desc .s_info image {
		width: 120rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
	}

	.shops-desc .s_info .shops-name {
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.shops-desc .s_info .shops-name>view:nth-child(1) {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-bottom: 20rpx;
	}

	.shops-desc .s_info .shops-name .star {
		display: flex;
		align-items: center;
	}

	.shops-desc .s_info .shops-name .star text {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.shops-desc .dvider {
		width: 100%;
		height: 2rpx;
		background-color: #efefef;
		margin: 10rpx 0;
	}

	.shops-desc .goods-list {
		width: 100%;
	}

	.shops-desc .goods-list .tit {
		height: 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
	}

	.shops-desc .goods-list .tit text:nth-child(1) {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.shops-desc .goods-list .tit text:nth-child(2) {
		font-size: 28rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #f34930;
	}

	.shops-desc .goods-list .g-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.shops-desc .goods-list .g-list .g-item {
		width: 227rpx;
		height: 280rpx;
		margin-bottom: 28rpx;
		display: flex;
		flex-direction: column;
		margin-right: 11rpx;
	}

	.shops-desc .goods-list .g-list .g-item:nth-child(3n) {
		margin-right: 0 !important;
	}

	.shops-desc .goods-list .g-list .g-item image {
		width: 227rpx;
		height: 200rpx;
		background-color: #f0c4a0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.shops-desc .goods-list .g-list .g-item text {
		padding: 0 11rpx;
		box-sizing: border-box;
		width: 100%;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.goods-parse {
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
	}

	.goods-parse .tit {
		box-sizing: border-box;
		padding: 0 24rpx;
		height: 90rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-parse .tit text {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.use-all {
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.bundle-good {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		box-sizing: border-box;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		border-top: solid 1rpx #efefef;
	}

	.bundle-good .bundle-item {
		flex: 1;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		box-sizing: border-box;
		height: 110rpx;
	}

	.bundle-good .bundle-item image {
		width: 108rpx;
		height: 108rpx;
		background-color: #f8990b;
		border-radius: 4rpx;
		margin-right: 10rpx;
		box-sizing: border-box;
	}

	.bundle-good .bundle-item .bundle-info {
		flex: 1;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.bundle-good .bundle-item .bundle-info>view:nth-child(1) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bundle-good .bundle-item .bundle-info>view:nth-child(2) text {
		font-size: 24rpx;
	}

	.bundle-good .bundle-item .bundle-info .text {
		color: #333;
	}

	.bundle-good .go-goods {
		width: 38rpx;
		height: 38rpx;
	}

	.no-evalute {
		height: 160rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.no-evalute image {
		width: 145rpx;
		height: 54rpx;
		margin-bottom: 20rpx;
	}

	.no-evalute text {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
</style>

<style>
	page {
		background: #f5f5f5;
	}

	.shops-info .name view:nth-child(3) .tui-icon-star-fill {
		margin-right: 10rpx !important;
	}

	.shops-info .name view:nth-child(3) .tui-icon-star {
		margin-right: 10rpx !important;
	}

	.shop-info-desc {
		font-size: 28rpx;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		color: #333333;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	button {
		display: flex;
		flex-direction: column;
		background: #fff !important;
		align-items: center;
		padding: 0 !important;
	}
</style>
